<template>
  <div class="box">
    <div class="top">
      <p>给我们留言</p>
      <p @click="$router.back()">关闭</p>
    </div>
    <div class="center">
      <p>
        你好,很抱歉我们暂时无法为你提供服务,如需帮助,请留意,我们将尽快联系你并解决你的问题
      </p>
    </div>
    <div class="bottom">
      <div class="item">
        <p>手机</p>
        <van-field
          v-model="tel"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入手机号"
        />
         <p>手机</p>
        <van-field
          v-model="message"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入留言"
        />
      </div>
    </div>
    <van-button type="info">提交</van-button>
  </div>
</template>
<script>
export default {
    data() {
        return {
            tel:'',
            message:''
        }
    },
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: #f2f3f5;
  .top {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #007aff;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    color: white;
    font-size: 17px;
  }
  .center {
    width: 100%;
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
    font-size: 10px;
    color: #797979;
  }
  .bottom {
    .item {
      p {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        box-sizing: border-box;
        input {
          width: 100%;
          height: 40px;
          background-color: white;
          line-height: 40px;
          padding: 0 10px;
          box-sizing: border-box;
        }
      }
    }
  }
  .van-button{
      width: 96%;
      margin-top: 5px;
      margin-left: 8px;
  }
}
</style>